<template>
  <div class="changePassword  common-details">
    <customDetailsTopbar title="修改密码" />
    <div class="px-2 d-scroll bg-white">
      <van-form ref="ruleForm">
        <van-field v-model="ruleForm.passwordOld" label="旧密码" type="password" placeholder="旧密码" :rules="passwordOldRules" />
        <van-field v-model="ruleForm.passwordNew" label="新密码" type="password" placeholder="新密码" :rules="passwordNewRules" />
        <van-field v-model="ruleForm.checkPass" label="确认新密码" type="password" placeholder="确认新密码" :rules="checkPassRules" />
      </van-form>
    </div>
    <van-button type="primary" round size="small" color="#409EFF" @click="changePaw('ruleForm')">修 改</van-button>
  </div>
</template>

<script>
import { encryptDes } from '@/utils'
import { updatePassword } from '@/api/user'
import { Dialog } from 'vant'
import customDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
export default {
  components: {
    customDetailsTopbar
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        passwordOld: '',
        passwordNew: '',
        checkPass: ''
      },
      passwordOldRules: [
        {
          required: true,
          message: '请输入旧密码',
          trigger: 'onBlur'
        }
      ],
      passwordNewRules: [
        {
          required: true,
          message: '请输入新密码',
          trigger: 'onBlur'
        },
        {
          validator: (value) => {
            return /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,20}$/.test(value)
          },
          message: '密码必须包含字母和数字并且在8位以上',
          trigger: 'onBlur'
        }
      ],
      checkPassRules: [
        {
          required: true,
          message: '请再次输入新密码',
          trigger: 'onBlur'
        },
        {
          validator: (value) => {
            return this.ruleForm.passwordNew === this.ruleForm.checkPass
          },
          message: '两次输入密码不一致',
          trigger: 'onBlur'
        },
        {
          validator: (value) => {
            return /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,20}$/.test(value)
          },
          message: '密码必须包含字母和数字并且在8位以上',
          trigger: 'onBlur'
        }
      ]
    }
  },
  watch: {
    type(newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
    }
  },
  beforeMount() {
    this.appDown()
  },
  created() {
    console.log(this.type)
  },
  methods: {
    appDown() {
      const u = navigator.userAgent
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      if (isiOS) {
        this.mobile = 'ios'
      } else if (isAndroid) {
        this.mobile = 'android'
      }
    },
    changePaw(formName) {
      this.$refs[formName]
        .validate()
        .then(() => {
          this.updatePassword()
        })
        .catch(() => {
          return false
        })
    },
    async updatePassword() {
      Dialog.confirm({
        title: '提示',
        message: '确定修改密码？'
      })
        .then(async() => {
          var param = {
            passwordNew: encryptDes(this.ruleForm.passwordNew),
            passwordOld: encryptDes(this.ruleForm.passwordOld)
          }
          const { status, msg } = await updatePassword(param)
          if (status === 0) {
            var _this = this
            if (this.mobile === 'ios') {
              const param = JSON.stringify({ key: 'userInfo', value: `0@0@0` })
              window.webkit.messageHandlers.GTMWebKitAPI.postMessage({ method: 'setLocalData', body: param })
            } else {
              localStorage.removeItem('userName')
              localStorage.removeItem('pass')
            }
            this.$toast.success({
              message: msg,
              onClose: function() {
                _this.ruleForm.passwordNew = ''
                _this.ruleForm.passwordOld = ''
                _this.ruleForm.checkPass = ''
                if (_this.type === 'login') {
                  document.getElementById('tabbar').style.display = 'inline'
                  _this.$router.push({ path: '/' })
                } else {
                  _this.$emit('update:show', false)
                }
              }
            })
          }
        })
        .catch(() => {
          this.$toast.success('已取消修改')
        })
    }
  }
}
</script>

<style lang="scss">
.changePassword {
  .van-nav-bar {
    background-color: #29d8a6;
    .van-nav-bar__title {
      font-size: 18px;
      color: #ffffff;
    }
    .van-icon {
      font-size: 22px;
      color: #ffffff;
    }
  }
  .van-cell {
    border-bottom: 1px solid #e4e6ec;
    padding: 10px 5px;
  }
  .van-button {
    width: 50%;
    margin: 20px auto;
    display: block;
    span {
      font-size: 16px;
    }
  }
}
</style>
